<template>
  <div class="download_wrap">
    <div class="download">
      <div class="left">
        <div class="title">Select Dowload file type</div>
        <div class="content">
          <el-tree
            node-key="id"
            :data="treeData1"
            :props="defaultProps"
            @node-click="nodeClick1"
            :default-expanded-keys="['aaa']"
            :highlight-current="isHighLight1"
          ></el-tree>
          <el-tree
            :data="treeData2"
            :props="defaultProps"
            @node-click="nodeClick2"
            :highlight-current="isHighLight2"
          ></el-tree>
        </div>
      </div>
      <div class="right">
        <div class="title_wrap">
          <div class="title">{{type == '1'?'Toxicity Category':'Feature Datasets'}}</div>
          <div class="search_wrap">
            <el-input
              v-model="searchVal"
              class="search_input"
              placeholder="请输入内容"
              size="small"
              clearable
              @keyup.enter.native="goSearch"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                class="search_btn"
                @click="goSearch"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div class="content">
          <div class="table">
            <el-table :data="tableData" style="width: 100%" stripe>
              <el-table-column
                prop="category"
                label="Category"
                sortable
                width="150px"
              >
              </el-table-column>
              <el-table-column
                prop="descriptions"
                label="Descriptions"
                sortable
                min-width="200px"
              >
              </el-table-column>
              <el-table-column
                prop="num"
                label="Number of"
                sortable
                width="120px"
              >
              </el-table-column>
              <el-table-column
                prop="source"
                label="source"
                sortable
                min-width="200px"
              >
              </el-table-column>
              <el-table-column
                prop="Model"
                label="Model"
                sortable
                width="110px"
              >
              </el-table-column>
              <el-table-column label="Operation" width="90px">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="detail" placement="bottom">
                    <div
                      class="btns_edit"
                      @click="goDetail(scope.$index, scope.row)"
                    ></div>
                  </el-tooltip>
                  <el-tooltip
                    effect="dark"
                    content="download"
                    placement="bottom"
                  >
                    <div
                      class="btns_download"
                      @click="handleDownload(scope.$index, scope.row)"
                    ></div>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <Pagination
              class="pagination-box"
              :pageNo="pageNo"
              :total="total"
              :pageSize="pageSize"
              @handleCurrentChange="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
export default {
  components: { Pagination },
  data() {
    return {
      pageNo: 1, // 分页
      total: 0,
      pageSize: 10,
      searchVal: "",
      treeData2: [],
      treeData1: [
        // {
        //   category: "Toxicity Datasets",
        //   children: [
        //     {
        //       label: "Aute Toxicity",
        //     },
        //     {
        //       label: "Systematic Toxicity",
        //     },
        //     {
        //       label: "Carcimgenity",
        //     },
        //     {
        //       label: "Cadiotoxicity",
        //     },
        //     {
        //       label: "Systematic Toxicity",
        //     },
        //     {
        //       label: "Carcimgenity",
        //     },
        //     {
        //       label: "Cadiotoxicity",
        //     },
        //     {
        //       label: "Systematic Toxicity",
        //     },
        //     {
        //       label: "Carcimgenity",
        //     },
        //   ],
        // },
        // {
        //   category: "Finger Prinis",
        //   children: [
        //     {
        //       label: "Aute Toxicity",
        //     },
        //     {
        //       label: "Systematic Toxicity",
        //     },
        //     {
        //       label: "Carcimgenity",
        //     },
        //     {
        //       label: "Cadiotoxicity",
        //     },
        //     {
        //       label: "Systematic Toxicity",
        //     },
        //     {
        //       label: "Carcimgenity",
        //     },
        //     {
        //       label: "Cadiotoxicity",
        //     },
        //     {
        //       label: "Systematic Toxicity",
        //     },
        //     {
        //       label: "Carcimgenity",
        //     },
        //   ],
        // },
      ],
      defaultProps: {
        children: "childList",
        label: "category",
      },
      tableData: [
        // {
        //   Endpoints: "Mouse_oral_LD50",
        //   Dencryption:
        //     "The Exposure Information Database (ExpoDB) is based on the Priority Chemical Lists of Existing Chemicals maintained by European Chemicals Bureau (ECB). These priority lists …",
        //   Number: "23374",
        //   Sowce: "ChenIDplus",
        //   Model: "Regrission",
        // },
      ],
      type: 1, // 1为查询毒性信息，2为特征信息
      choosedId: "",
      isHighLight1: false,
      isHighLight2: false
    };
  },
  computed: {
    isPhone() {
      return this.$store.state.isPhone;
    },
  },
  created() {
    this.$api.getCategoryInfo().then((res) => {
      // console.log(res,'res')
      // 后端返回不是正规树结构数据。。。 
      this.treeData1.push({
        category: "Toxicity Datasets",
        childList: res[0].value,
        id: -1,
      });
      this.treeData2.push({
        category: "Feature Datasets",
        childList: res[1].value,
        id: -2,
      });
      this.choosedId = this.treeData1[0].childList[0].id;
      this.getTable();
    });
  },
  methods: {
    nodeClick1(data, node) {
      this.isHighLight1 = true
      this.isHighLight2 = false
      this.type = 1;
      if (data.id) {
        // 第一级不请求接口
        if(data.id == -1) return false
        this.choosedId = data.id;
        this.getTable();
      }
      this.pageNo = 1
    },
    nodeClick2(data, node) {
      this.isHighLight2 = true
      this.isHighLight1 = false
      this.type = 2;
      if (data.id) {
        if(data.id == -2) return false
        this.choosedId = data.id;
        this.getTable();
      }
      this.pageNo = 1
    },
    getTable() {
      this.$api
        .getCategoryDetailedInfo({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          pid: this.choosedId,
          search: this.searchVal,
          type: this.type,
        })
        .then((res) => {
          this.total = res.total;
          this.tableData = res.list;
        });
    },
    handleCurrentChange(data) {
      this.pageNo = data;
      this.getTable();
    },
    goSearch() {
      this.getTable();
    },
    handleDownload(index, row) {
      if (this.type == 1) {
        window.open(
          window.VUE_APP_BASE_URL +
            "/DownloadController/DownloadToxicityInfo?toxicityId=" +
            row.id
        );
      }
      if (this.type == 2) {
        window.open(
          window.VUE_APP_BASE_URL +
            "/DownloadController/DownloadFeatureInfo?featureId=" +
            row.id
        );
      }
    },
    goDetail(index,row) {
      // 判断当前点击哪个列表 type  1为查询毒性信息，2为特征信息
      let data = {}
      if(this.type == 1){
        data.toxicityId = row.id
        data.dtype = 1
      }else if(this.type == 2){
        data.featureId = row.id
        data.dtype = 2
      }
      this.$router.push({
        path: "/collectionDtail",
        query: data,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.download_wrap {
  width: 93vw;
  max-width: 1340px;
  padding: 24px 0;
  margin-left: auto;
  margin-right: auto;
  .download {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    .left {
      flex: 0 0 210px;
      width: 210px;
      background-color: #fff;
      border-radius: 2px;
      box-sizing: border-box;
      padding: 20px 8px;
      .title {
        font-size: 20px;
        line-height: 24px;
        font-weight: 700;
        color: #17233d;
        padding-left: 8px;
      }
      /deep/ .content {
        margin-top: 20px;
        .el-tree-node{
          white-space: normal;
        }
        .el-tree-node__content {
          height: auto;
          margin:5px 0;
          &:hover {
            background-color: #f3efff;
          }
        }
        .el-tree-node__label {
          //color: #515a6e;
          color: #17233d;
        }
        .el-tree-node__children {
          .el-tree-node__label {
            color: #515a6e;
          }
        }
        .el-tree--highlight-current
          .el-tree-node.is-current
          > .el-tree-node__content {
          .el-tree-node__label {
            color: #6e5bfe;
            font-weight: bold;
          }
        }
      }
    }
    .right {
      overflow: hidden;
      flex: 1 1 100%;
      margin-left: 16px;
      background-color: #fff;
      border-radius: 2px;
      box-sizing: border-box;
      padding: 20px 16px;
      .title_wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 20px;
          line-height: 24px;
          font-weight: 700;
          color: #17233d;
        }
        .search_wrap {
          display: flex;
          align-items: center;
          height: 100%;
          .search_input {
            width: 400px;
            height: 100%;
            ::v-deep .el-input__inner {
              border-radius: 4px 0 0 4px;
            }
          }
        }
      }
      .content {
        margin-top: 20px;
        .table {
          ::v-deep .el-table {
            //color: #515a6e;
            th.el-table__cell {
              background-color: #f3efff;
            }
            th.el-table__cell > .cell {
              line-height: 30px;
              font-size: 14px;
              font-weight: 700;
              color: #17233d;
            }
            td.el-table__cell {
              padding: 14px 0;
            }
            td.el-table__cell div {
              line-height: 26px;
            }
            .el-table__row {
              .el-table__cell {
                &:last-child {
                  .cell {
                    display: flex;
                    justify-content: space-around;
                  }
                }
              }
            }
            .btns_edit {
              width: 17px;
              height: 18px;
              background-image: url(~@/assets/img/icon_details.png);
            }
            .btns_download {
              width: 16px;
              height: 16px;
              background-image: url(~@/assets/img/icon_dowload.png);
            }
            .btns_edit,
            .btns_download {
              font-size: 28px;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              background-position: center;
              // &.el-icon-s-order::before {
              //   -webkit-line-clamp: 2;
              //   background-image: linear-gradient(
              //     270deg,
              //     #8853ff 0%,
              //     #5564fe 100%
              //   );
              //   -webkit-background-clip: text;
              //   -webkit-text-fill-color: transparent;
              // }
              // &.el-icon-upload::before {
              //   -webkit-line-clamp: 2;
              //   background-image: linear-gradient(
              //     180deg,
              //     #60b7ff 0%,
              //     #2880ff 100%
              //   );
              //   -webkit-background-clip: text;
              //   -webkit-text-fill-color: transparent;
              // }
            }
          }
        }
      }
    }
  }
  /deep/ .download {
    .el-input-group__append {
      background: linear-gradient(270deg, #8853ff 0%, #5564fe 100%);
      color: white;
      border-radius: 0 4px 4px 0;
    }
  }
  .pagination-box {
    &.pagination {
      padding: 20px 0;
    }
  }
}
// 响应式设计
@media screen and (max-width: 768px) {
  .download_wrap {
    padding: 14px;
    .download {
      flex-direction: column;
      .left {
        flex: none;
        width: 100%;
        padding: 14px;
        margin-bottom: 14px;
      }
      .right {
        width: 100%;
        flex: none;
        margin-left: 0;
        padding: 14px;
        .title_wrap {
          flex-direction: column;
          .title {
            margin-bottom: 6px;
          }
        }
      }
    }
  }
}
</style>
